<template>
  <div class="tencent-api-demo">
    <h2>腾讯云API调用演示</h2>
    
    <div class="api-config">
      <h3>API配置</h3>
      <a-form layout="vertical">
        <a-form-item label="认证头">
          <a-input v-model:value="authorization" placeholder="Authorization头" />
        </a-form-item>
        <a-form-item label="时间戳">
          <a-input-number v-model:value="timestamp" :min="0" />
        </a-form-item>
        <a-form-item label="令牌">
          <a-input v-model:value="token" placeholder="X-TC-Token值" />
        </a-form-item>
        <a-form-item label="机器人ID">
          <a-input v-model:value="botBizId" placeholder="BotBizId" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="callApi" :loading="loading">调用API</a-button>
        </a-form-item>
      </a-form>
    </div>
    
    <a-divider />
    
    <div class="api-result">
      <h3>API响应结果</h3>
      <a-spin :spinning="loading">
        <pre v-if="result">{{ JSON.stringify(result, null, 2) }}</pre>
        <a-empty v-else description="暂无数据" />
      </a-spin>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { getDocCategoriesWithAuth } from '../api/knowledge';

// API请求参数
const authorization = ref("TC3-HMAC-SHA256 Credential=AKIDrPL6WPX5Y2E8lZ6O_rPFaxUrizx0Lcc7Tm7EEOVY_zy8m1bCMDy4cUqU0AdaEfbd/2025-04-27/lke/tc3_request, SignedHeaders=content-type;host, Signature=b0474666853d85a40d823d0d467e257abaaf34acf2826f3bbb83d5dc780f4f58");
const timestamp = ref(1745741224);
const token = ref("d9mMOOFj742EazUzxUprp2QxZH8GrJQa9784036296586bab357b0302ac3384fcdN-M7SAoazn8v8j1ji6FE7mjkLU1_dOcwy-z8izKXmEoircS6jRGbeHF6b-2tuJwWqYy_taWznn4TqSbKinR2izJw55ZbmRXUk3d7caKxonSjjxYUNVeTA9VB3s0prweVvzlz-6Y6zuYKFUVFRhc-QEpv7SOOVK8ljGqRmWLkeWd4Ioq7MAO-RpO5_wZSxNGSbNWckT9curN52cnHgNd0wmMIea3qp93t6GbtXsM0WcIvEZtQSWzmT99HffziYvvmRdCU81pNbRMvJUPmjC1KQ");
const botBizId = ref("1902651563333648384");

// 状态
const loading = ref(false);
const result = ref<any>(null);

// 调用API
const callApi = async () => {
  loading.value = true;
  
  try {
    const data = await getDocCategoriesWithAuth();
    result.value = data;
    message.success('API调用成功');
  } catch (error) {
    console.error('API调用失败:', error);
    message.error('API调用失败: ' + (error instanceof Error ? error.message : '未知错误'));
  } finally {
    loading.value = false;
  }
};

// 页面加载时自动调用一次API
onMounted(() => {
  // 可选：自动调用API
  // callApi();
});
</script>

<style scoped>
.tencent-api-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.api-config {
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.api-result {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  min-height: 200px;
}

pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
  max-height: 400px;
}
</style> 